<template>
  <view class="serve-detail-wrapper">
    <view class="serv-det-header" v-if="details">
      <image :src="$BASE_URL + details.service_banner"></image>
    </view>
    <view class="serve-detail-info">
      <view class="detail-info-list flex-between">
        <view class="serve-item">
          <view class="price-num-box s-flex-r-b-c">
            <view class="price-box s-flex-r-s-c">
              <text class="price">{{ details.price }}</text>
              <text class="pro">服务费</text>
            </view>
            <view class="num-box s-flex-r-s-c">
              <view class="person-avatar s-flex-r-s-c">
                <image
                  class="avatar avatar1"
                  style="z-index: 3"
                  src="/static/img/avatar/641.jpg"></image>
                <image
                  class="avatar avatar1"
                  style="z-index: 2"
                  src="/static/img/avatar/642.jpg"></image>
                <image class="avatar" src="/static/img/avatar/640.jpg"></image>
                <up-icon
                  class="avatar2"
                  name="more-circle"
                  color="#DBDBDB"
                  size="24"></up-icon>
              </view>
              <view class="person-num s-flex-r-s-c">
                <text>{{ details.people_num }}</text>
                <text class="pro">人已预约</text>
              </view>
            </view>
          </view>
          <view class="item-tit">{{ details.service_name }}</view>
          <view class="detail-item s-flex-r-s-c" v-for="item in details.service_characteristic">
            <text class="detail-val">{{item.label}}</text>
            <text class="detail-label">{{item.value}}</text>
          </view>
        </view>
      </view>
    </view>
    <up-sticky>
      <view style="background: '#f8f8f8'">
        <up-tabs
          :itemStyle="{ background: '#f8f8f8', height: '100rpx' }"
          class="my-tabs"
          :current="currentTab"
          :list="details.content"
          :scrollable="false"
          keyName="title"
          @click="scrollToAnchor"></up-tabs>
      </view>
    </up-sticky>
    <view class="serv-content">
      <view
        class="serve-item"
        :id="v.boxId"
        v-for="(v, i) in details.content"
        :key="i">
        <view class="serve-item-header">
          <text class="head-b"></text>
          <text class="item-tit" :id="v.title">{{ v.title }}</text>
        </view>
        <view class="serve-info" v-html="v.value"></view>
      </view>
    </view>
    <view class="apply-btn-wrapper">
      <view class="share">
        <button open-type="share" plain="true" @click="onShareAppMessage">
          <view class="s-flex-r-c-c">
            <image
              :lazy-load="true"
              src="/static/img/index/share.jpg"
              style="width: 32rpx; margin-right: 10rpx"
              mode="widthFix"></image>
            <text>分享</text>
          </view>
        </button>
      </view>
      <view class="apply-btn" @click="handleNext">
        <text>申请</text>
      </view>
    </view>
	<button open-type="contact" @contact="contactFn">
	  <liuDragButton>
	    <image
	      src="https://oss.bigchun.com/img/tupian/kefu.png"
	      mode=""
	      style="width: 180rpx; height: 80rpx" />
	  </liuDragButton>
	</button>
  </view>
</template>

<script setup>
import liuDragButton from "@/components/liu-drag-button/liu-drag-button.vue";
import customNav from "@/components/custom-nav.vue";
import { ref,onMounted, getCurrentInstance, reactive, nextTick } from "vue";
const { proxy } = getCurrentInstance();
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
const title = ref("");
const id = ref("");
const currentTab = ref("0");
const isTabChange = ref(false);
const showTabs = ref(true);
const distanceArr = ref([]);
const details = ref({});
const toView = ref("");

function handleNext() {
  uni.navigateTo({
    url: `/pages/serve/serveApplyNew?id=${id.value}`,
  });
  return;
  if (id.value == 1) {
    uni.navigateTo({
      url: `/pages/serve/peopleApply/peopleApply`,
    });
  } else if (id.value == 2) {
    uni.navigateTo({
      url: `/pages/serve/serveApply`,
    });
  } else if (id.value == 3) {
    uni.navigateTo({
      url: `/pages/serve/companyApply/companyApply`,
    });
  } else if (id.value == 4) {
    uni.navigateTo({
      url: `/pages/serve/applystartBusiness/applystartBusiness`,
    });
  }
}
onLoad((e) => {
  id.value = e.id;
  getDetails();
});
onMounted(() => {
  // proxy.path
  proxy.shareObj.path+=`?id=${id.value}`
});
onPageScroll((event) => {
  if (isTabChange.value) {
    return;
  }
  const { scrollTop } = event;
  // // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
  const skewY = 100;
  if (scrollTop >= skewY && scrollTop >= distanceArr.value[0]) {
    nextTick(() => {
      const length = distanceArr.value.length;
      const index = distanceArr.value.findIndex(
        (el) => el - skewY - scrollTop > 0
      );
      // 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
      // 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
      currentTab.value = index > 0 ? index - 1 : length - 1;
    });
  } else {
    currentTab.value = 0;
  }
});
function getDistanceArr() {
  details.value.content.map((el) => {
    uni
      .createSelectorQuery()
      .select(`#${el.boxId}`)
      .boundingClientRect((data) => {
        // 获取当前ID距离顶部的top值
        distanceArr.value.push(data.top);
      })
      .exec();
  });
}
// 获取项目详情
function getDetails() {
  proxy
    .$request({
      url: "api/Service/getServiceDetail",
      header: "application/x-www-form-urlencoded",
      data: {
        id: id.value,
      },
    })
    .then((res) => {
      details.value = res.data;
	  const obj = details.value.service_characteristic
	  const arr = []
	  for (var index in obj) {
		  arr.push({
			  label:index,
			  value:obj[index]
		  })
	  	
	  }
	  details.value.service_characteristic = arr
      details.value.content.forEach((item, index) => {
        item.boxId = `boxId${index}`;
      });
      toView.value = "xmjs" + res.data.content[0].id;
      nextTick(() => {
        getDistanceArr();
      });
    });
}
function scrollToAnchor(item, index) {
  isTabChange.value = true;
  // this.$nextTick 保证当前isTabChange 为true后执行代码
  // 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
  nextTick(() => {
    currentTab.value = item.index;
    uni
      .createSelectorQuery()
      .select(`#${item.boxId}`)
      .boundingClientRect((data) => {
        uni
          .createSelectorQuery()
          .select(".serve-detail-wrapper")
          .boundingClientRect((res) => {
            const scrollTop = data.top - res.top; // 获取差值
            const skewY = 80; // 偏移
            // 页面开始进行滚动到目标位置
            uni.pageScrollTo({
              // scrollTop的计算需要注意，在往上或者是往下拉的时候 需要加减 吸顶的高度
              scrollTop: scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,
              duration: 300,
              complete: function () {
                const timer = setTimeout(() => {
                  isTabChange.value = false; // 关闭
                  clearTimeout(timer);
                }, 500);
                // 真机在测试<500ms的时候，ios无问题，但是安卓和鸿蒙都会在变为false的时候，
                //再次触发onPageScroll事件，避免兼容性问题，将值改为500ms，
                //解决ios和安卓、鸿蒙系统兼容性问题
              },
            });
          })
          .exec();
      })
      .exec();
  });
}

function onShareAppMessage(res) {
  var insg = uni.getStorageSync("userinfo");
  if (res.from === "button") {
    // 来自页面内分享按钮
    console.log(res.target);
  }
  return {
    title: "项目详情", //分享的名称
    path: `/pages/index/index?sourceUserId=${insg.id}&id=${id.value}`, // 点击链接进入的页面
    mpId: "wxd84a409b5e9d720a", //此处配置微信小程序的AppId
  };
}
</script>

<style lang="scss" scoped>
image {
  height: auto;
}
// 可以加在uni.scss中
::deep .u-tabs__wrapper__nav {
  background: #f8f8f8;
}
::deep .u-sticky__content {
  background: #f8f8f8;
}
.serve-detail-wrapper {
  background: #f8f8f8;

  .serv-det-header {
    image {
      height: 416rpx;
      width: 100%;
    }
  }

  .cycle {
    display: flex;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .processing {
      text-align: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      border-right: 1px #f8f8f8 solid;
      flex: 1;

      .time {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 10rpx;
      }
    }
  }

  .tab {
    display: flex;
    padding: 24rpx 20rpx;
    box-sizing: border-box;
    background: #fff;
    margin-top: 20rpx;

    .name {
      flex: 1;
      color: #666666;
      font-size: 28rpx;
      text-align: center;
    }

    .active {
      flex: 1;
      text-align: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #02109c;
    }
  }
  .my-tabs {
    background: #f8f8f8;
    width: 100%;
    box-sizing: border-box;
  }
  .serv-content {
    position: relative;
    // top: 50rpx;
    margin-top: 20rpx;
    padding: 0 32rpx 150rpx;

    .serve-item {
      background: #fff;
      margin-bottom: 12rpx;
      border-radius: 20rpx;
      padding: 32rpx;

      .serve-item-header {
        margin-bottom: 20rpx;

        .head-b {
          display: inline-block;
          width: 12rpx;
          height: 24rpx;
          background: #02109c;
        }

        .item-tit {
          color: #333333;
          font-weight: bold;
          font-size: 32rpx;
          margin-left: 16rpx;
        }
      }
    }
  }

  .serve-detail-info {
    margin-top: 20rpx;
    padding: 0 32rpx;

    .detail-info-list {
      text {
        display: block;
        margin: 8rpx 0;
      }
      .detail-val {
        color: #333;
        margin-right: 30rpx;
        font-size: 28rpx;
      }

      .detail-label {
        font-size: 26rpx;
        color: #999;
      }

      .serve-item {
        background: #fff;
        margin-bottom: 12rpx;
        border-radius: 20rpx;
        padding: 32rpx;

        .item-tit {
          color: #000000;
          font-weight: bold;
          font-size: 32rpx;
          margin-bottom: 14rpx;
        }
        .price-num-box {
          margin-bottom: 14rpx;
          color: #999;
          .price-box {
            font-size: 26rpx;
            .price {
              color: #ff7139;
              font-size: 38rpx;
              font-weight: bold;
            }
            .pro {
              margin-left: 7rpx;
            }
          }
          .num-box {
            font-size: 24rpx;
            .person-avatar {
              .avatar {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                border: 2rpx solid #fff;
                z-index: 1;
              }
              .avatar1 {
                margin-right: -20rpx;
                z-index: 2;
              }
              .avatar2 {
                margin-left: -20rpx;
                z-index: 0;
              }
              .pro {
                margin-left: 7rpx;
              }
            }
          }
        }
      }
    }
  }
}
.apply-btn-wrapper {
  position: fixed;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140rpx;
  padding: 0 30rpx;
  box-sizing: border-box;

  .share {
    width: 200rpx;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    border: 2rpx solid #02109c;
    font-size: 32rpx;
    color: #02109c;

    button {
      background: none !important;
      border: none !important;
      color: #02109c;
    }

    button[plain] {
      border: 0;
    }
  }

  .apply-btn {
    margin: 0 auto;
    height: 96rpx;
    background: linear-gradient(128deg, #ff9839 0%, #ff7139 100%);
    border-radius: 200rpx;
    width: 466rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    line-height: 96rpx;
  }
}
</style>
